<template>
	<div class="add-sensitive-words-container">
		<el-dialog :title="addTitle" :visible.sync="dialogVisible" width="500px" :before-close="closeAddSensitiveWords">
			<el-form :model="form" :rules="rules" ref="sensitiveWordsRef" label-width="100px" class="demo-ruleForm" hide-required-asterisk="false" label-position="left">
				<el-form-item label="违规敏感词" prop="sensitiveWords" :error="errorWords">
					<el-input v-model="form.sensitiveWords" placeholder="输入按enter键添加关键词，多个用逗号隔开" class="sensitive-input" style="width: 276px" @keyup.enter.native="okWords"></el-input>
					<el-button @click="okWords" class="ok-btn">确定</el-button>
				</el-form-item>
				<div class="words-wrapper" v-if="showTags">
					<el-tag :key="tag" v-for="tag in form.dynamicTags" closable @close="handleClose(tag)">
						{{ tag }}
					</el-tag>
				</div>
				<el-form-item label="单项满分" prop="singleScore" class="marginTop">
					<el-input v-model="form.singleScore" class="score-input"></el-input><span class="score-text">分</span>
				</el-form-item>
				<el-form-item label="单次未合规扣分" prop="deductScore"
					><span class="minus">-</span> <el-input v-model="form.deductScore" class="score-input"> </el-input><span class="score-text">分</span>
				</el-form-item>
				<el-form-item label="单项通过分值" prop="singlePassScore"> <el-input v-model="form.singlePassScore" class="score-input"></el-input> <span class="score-text">分</span> </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAddSensitiveWords">取 消</el-button>
				<el-button type="primary" @click="sureAddSensitiveWords" class="sure-btn">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: '',
	components: {},
	props: {
		dialogVisible: {
			require: true,
			type: Boolean,
			default: () => false
		},
		addTitle: {
			require: true,
			type: String,
			default: () => ''
		},
		editSensitiveWordsData: {
			require: true,
			type: Object,
			default: () => {}
		}
	},
	data() {
		const validateSingle = (rule, value, callback) => {
			console.log(value, 'validateSingle:');
			let flag = new RegExp('^[0-9]+$', 'g').test(value);
			if (!flag) {
				return callback(new Error('请输入正整数数值'));
			}
			console.log(Number(value));
			if (Number(value) > Number(this.form.deductScore) && this.form.deductScore) {
				this.$refs.sensitiveWordsRef.validateField('deductScore');
			}
			if (Number(value) > Number(this.form.singlePassScore) && this.singlePassScore) {
				this.$refs.sensitiveWordsRef.validateField('singlePassScore');
			}
			return callback();
		};
		const validateDeduct = (rule, value, callback) => {
			console.log(this.form.singleScore, 'validateDeduct', value);
			let flag = new RegExp('^[0-9]+$', 'g').test(value);
			if (!flag) {
				return callback(new Error('请输入正整数数值'));
			} else if (Number(value) > Number(this.form.singleScore)) {
				return callback(new Error('单次未合规扣分不得大于单项满分'));
			}
			return callback();
		};
		const validateSinglePass = (rule, value, callback) => {
			console.log(this.form.singleScore, 'validateSinglePass', value);
			let flag = new RegExp('^[0-9]+$', 'g').test(value);
			if (!flag) {
				return callback(new Error('请输入正整数数值'));
			} else if (Number(value) > Number(this.form.singleScore)) {
				return callback(new Error('单项通过分值不得大于单项满分'));
			}
			return callback();
		};
		const validateSensitiveWords = (rule, value, callback) => {
			console.log(this.form.dynamicTags, 'validateSensitiveWords', value);
			if (value === '' || this.form.dynamicTags?.length === 0) {
				return callback(new Error('请添加违规关键词'));
			}
			return callback();
		};
		return {
			form: {
				sensitiveWords: '',
				dynamicTags: [],
				singleScore: '',
				deductScore: '',
				singlePassScore: ''
			},
			showTags: false,
			rules: {
				sensitiveWords: [
					// { required: true, message: '请添加违规关键词', trigger: 'blur' },
					// { validator: validateSensitiveWords, trigger: 'blur' }
				],
				singleScore: [
					{ required: true, message: '请输入单项分值', trigger: 'blur' },
					{ validator: validateSingle, trigger: 'blur' }
				],
				deductScore: [
					{ required: true, message: '请输入单次未合规扣分', trigger: 'blur' },
					{ validator: validateDeduct, trigger: 'blur' }
				],
				singlePassScore: [
					{ required: true, message: '请输入单项通过分值', trigger: 'blur' },
					{ validator: validateSinglePass, trigger: 'blur' }
				]
			},
			errorWords: ''
		};
	},
	watch: {
		editSensitiveWordsData: {
			handler(newVal, oldVal) {
				this.form = { ...newVal };
				console.log(newVal, 'editSensitiveWordsData', oldVal);
				if (newVal?.dynamicTags.length > 0) {
					this.showTags = true;
				}
			},
			deep: true
		}
	},
	mounted() {
		console.log(this.editSensitiveWordsData, 'addTitle:', this.addTitle);
		if (this.editSensitiveWordsData?.singleScore) {
			this.form = { ...this.editSensitiveWordsData };
			if (this.editSensitiveWordsData?.dynamicTags.length > 0) {
				this.showTags = true;
			}
			console.log('form:', this.form);
		}
	},
	methods: {
		closeAddSensitiveWords() {
			this.$refs['sensitiveWordsRef'].resetFields();
			this.$emit('closeAddSensitiveWords');
			this.showTags = false;
		},
		sureAddSensitiveWords() {
			console.log(this.form?.dynamicTags, 'sureAddSensitiveWords', this.form.sensitiveWords, 999);
			if (this.form.dynamicTags?.length > 0) {
				this.errorWords = '';
			}
			if (this.form.dynamicTags?.length === 0) {
				this.errorWords = '请添加违规关键词';
				return;
			} else {
				this.errorWords = '';
			}
			this.$refs['sensitiveWordsRef'].validate(valid => {
				if (valid) {
					this.$emit('sureAddSensitiveWords', this.form);
					if (this.form?.dynamicTags.length > 0) {
						this.errorWords = '';
						this.showTags = true;
					} else {
						this.showTags = false;
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		handleClose(tag) {
			console.log(tag, this.form.dynamicTag);
			this.form.dynamicTags.splice(this.form.dynamicTags.indexOf(tag), 1);
			if (this.form.dynamicTags.length === 0) {
				this.showTags = false;
			}
		},
		// 确定添加
		okWords() {
			this.getInputPush();
		},
		// 键盘回车
		// keyupSubmit() {
		// 	this.getInputPush();
		// },
		// 数组里面添加违规敏感词
		getInputPush() {
			console.log('this.form.sensitiveWords', this.form.sensitiveWords.trim().length);
			if (this.form.sensitiveWords.trim().length === 0) {
				this.$message.error('请输入关键词！');
				return;
			}
			let userInput = this.form.sensitiveWords.trim().replace(/，/g, ',').split(',');
			console.log(userInput, 'userInput');
			// 校验敏感词长度
			const lengthOver10 = userInput.filter(item => {
				return item.length > 10;
			});
			if(lengthOver10 && lengthOver10.length > 0){
				this.$message.error('单个敏感词不能超过10个字符');
				return;
			}
			console.log('this.form.dynamicTags', this.form.dynamicTags);
			// 比较输入的元素 和已经存在的元素。取差值。
			const diffArr = userInput.filter(e => !this.form.dynamicTags.includes(e));
			if (diffArr && diffArr.length === 0) {
				this.$message.error('敏感词已添加');
				return;
			} else {
				userInput = diffArr;
			}
			console.log(userInput.filter(e => !this.form.dynamicTags.includes(e)));
			if ((this.form.sensitiveWords && this.form.dynamicTags?.filter(item => item.length < 10)) || this.form.dynamicTags?.length > 0) {
				this.showTags = true;
				this.errorWords = '';
			} else {
				this.showTags = false;
			}

			if (!this.form.sensitiveWords && this.form.sensitiveWords.length === 0) {
				console.log('请输入关键词:', this.form.dynamicTags);
				this.$message.error('请输入关键词！');
				return;
			}
			if (this.form.sensitiveWords?.length > 10 && !this.form.sensitiveWords.includes(',') && !this.form.sensitiveWords.includes('，')) {
				console.log(this.form.sensitiveWords?.length);
				// this.showTags = false;
				this.$message.error('单个敏感词不能超过10个字符');
				return;
			}
			if (this.form.dynamicTags?.length > 500) {
				this.$message.error('敏感词数量不能超过500个！');
				return;
			}
			// 英文逗号
			if (this.form.sensitiveWords.includes(',') && this.form.sensitiveWords.trim()) {
				this.form.dynamicTags = Array.from(new Set([...this.form.dynamicTags, ...this.form.sensitiveWords.split(',')]));
				this.form.sensitiveWords = '';
			}
			// 中文逗号
			if (this.form.sensitiveWords.includes('，') && this.form.sensitiveWords.trim()) {
				this.form.dynamicTags = Array.from(new Set([...this.form.dynamicTags, ...this.form.sensitiveWords.split('，')]));
				this.form.sensitiveWords = '';
			}
			if (this.form.sensitiveWords.trim() && this.form.sensitiveWords && !this.form.sensitiveWords.includes(',') && !this.form.sensitiveWords.includes('，')) {
				this.form.dynamicTags = Array.from(new Set([...this.form.dynamicTags, this.form.sensitiveWords]));
				this.form.sensitiveWords = '';
			}
			this.form.dynamicTags = this.form.dynamicTags?.filter(item => item.trim());
			console.log('dynamicTags', this.form.dynamicTags);
		}
	}
};
</script>

<style lang="less" scoped>
.add-sensitive-words-container {
	position: relative;
	.sensitive-input {
		/deep/ .el-input__inner {
			height: 32px !important;
		}
	}
	.score-input {
		/deep/ .el-input__inner {
			width: 88px;
			height: 32px !important;
		}
	}
	.words-wrapper {
		width: 340px;
		max-height: 118px;
		background: #ffffff;
		border: 1px solid #d3d3d3;
		border-radius: 4px;
		overflow: auto;
		padding: 3px;
		margin: -15px 0 0 100px;
		// height: 88px;
		/deep/ .el-tag {
			margin: 2px 0 2px 12px;
			background: #fafafa;
			border: 1px solid #e6e6e6;
			border-radius: 4px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		/deep/ .el-tag__close {
			color: #bcbcbc;
		}
	}
	.ok-btn {
		background: #ffffff;
		border: 1px solid #6384fe;
		border-radius: 4px;
		color: #6384fe;
		margin-left: 12px;
	}
	.marginTop {
		margin-top: 18px;
	}
	.score-text {
		position: absolute;
		top: 0;
		left: 100px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.minus {
		position: absolute;
		top: 0;
		z-index: 10;
		padding: 0 5px;
	}
	.dialog-footer {
		border-radius: 4px;
		.sure-btn {
			background: #6384fe;
		}
	}
	/deep/ .el-dialog__body {
		border-top: 1px solid #ccc;
	}
	/deep/ .el-form-item__label {
		font-size: 12px;
	}
}
</style>
